{% block sw_tree_item %}
<div
    class="sw-tree-item"
    :class="styling"
    role="treeitem"
    :aria-label="getName(item)"
    :tabindex="active ? 0 : -1"
    :aria-current="active ? 'page' : undefined"
    :aria-expanded="isOpened ? 'true' : 'false'"
    :data-item-id="item.id"
    :aria-owns="item.id"
    :aria-selected="checked"
>

    {% block sw_tree_item_element %}
    <div
        v-droppable="{ dragGroup: 'sw-tree-item', data: item }"
        v-draggable="dragConf"
        class="sw-tree-item__element"
    >

        {% block sw_tree_item_element_leaf_icon %}
        <div
            v-if="item.childCount <= 0"
            class="sw-tree-item__leaf"
        ></div>
        {% endblock %}

        {% block sw_tree_item_element_toggle %}
        <div
            v-else
            class="sw-tree-item__toggle"
            role="button"
            tabindex="0"
            :aria-label="$t('sw-tree-item.toggleTreeItem', { name: getName(item) })"
            :aria-expanded="opened ? 'true' : 'false'"
            @click="openTreeItem(); getTreeItemChildren(item)"
            @keydown.enter="openTreeItem(); getTreeItemChildren(item)"
        >

            {% block sw_tree_item_element_toggle_icon %}
            <mt-icon
                size="24px"
                :name="opened ? 'regular-chevron-down-xxs' : 'regular-chevron-right-xxs'"
            />
            {% endblock %}
        </div>
        {% endblock %}

        {% block sw_tree_item_element_selection %}
        <div class="sw-tree-item__selection">
            <mt-checkbox
                v-if="displayCheckbox"
                :disabled="item.disabled || currentEditElement === item.data.id"
                :checked="checked"
                :partial="checkedGhost"
                :aria-label="$t('sw-tree-item.toggleItem', { name: getName(item) })"
                @update:checked="toggleItemCheck($event, item)"
            />
        </div>
        {% endblock %}

        {% block sw_tree_item_element_grip %}
        <slot name="grip">
            <div
                v-if="item.childCount > 0"
                class="sw-tree-item__icon"
            >
                <mt-icon
                    v-if="opened"
                    name="regular-folder-open"
                    size="16px"
                />
                <mt-icon
                    v-else
                    name="regular-folder"
                    size="16px"
                />
            </div>
            <div
                v-else
                class="sw-tree-item__icon"
            >
                <mt-icon name="regular-circle-xxs" />
            </div>
        </slot>
        {% endblock %}

        {% block sw_tree_item_element_content %}
        <div
            ref="item"
            v-tooltip="{
                message: item.disabledToolTipText,
                disabled: !item.disabledToolTipText,
            }"
            class="sw-tree-item__content"
        >
            <slot
                name="content"
                v-bind="{ item, openTreeItem, getName }"
            >
                {% block sw_tree_items_item_content_edit %}
                <template v-if="currentEditElement === item.data.id">
                    <sw-confirm-field
                        v-model="item.data.name"
                        class="sw-tree-detail__edit-tree-item"
                        :prevent-empty-submit="true"
                        :placeholder="$tc(`${translationContext}.general.buttonCreate`)"
                        @input="onFinishNameingElement"
                        @blur="onBlurTreeItemInput(item)"
                        @submit-cancel="onCancelSubmit(item)"
                    />
                </template>
                {% endblock %}

                {% block sw_tree_items_item_content_default %}
                <template v-else>
                    <a
                        v-if="onChangeRoute"
                        class="tree-link"
                        :href="showItemUrl(item)"
                        @click.prevent="onChangeRoute(item)"
                    >
                        <span class="sw-tree-item__label">{{ getName(item) }}</span>
                    </a>
                    <span
                        v-else
                        class="sw-tree-item__label"
                    >{{ getName(item) }}</span>
                </template>
                {% endblock %}
            </slot>
        </div>
        {% endblock %}

        {% block sw_tree_item_element_actions %}
        <div class="sw-tree-item__actions">

            {% block sw_tree_items_active_state %}
            <mt-icon
                v-if="shouldShowActiveState"
                size="6px"
                :color="getActiveIconColor(item)"
                name="solid-circle-xxxs"
            />
            {% endblock %}

            <slot
                name="actions"
                :item="item"
                :open-tree-item="openTreeItem"
                :add-element="addElement"
                :add-sub-element="addSubElement"
                :on-duplicate="onDuplicate"
                :on-change-route="onChangeRoute"
                :delete-element="deleteElement"
                :tool-tip="toolTip"
                :is-disabled="isDisabled"
            >
                <sw-context-button
                    v-tooltip="toolTip"
                    class="sw-tree-item__context_button"
                    :disabled="isDisabled || undefined"
                >

                    {% block sw_tree_items_actions_without_position %}
                    <sw-context-menu-item
                        v-if="allowCreateWithoutPosition"
                        class="sw-tree-item__without-position-action"
                        @click="addElement(item)"
                    >
                        {{ $tc(`${translationContext}.general.actions.withoutPosition`) }}
                    </sw-context-menu-item>
                    {% endblock %}

                    {% block sw_tree_items_actions_before %}
                    <sw-context-menu-item
                        v-if="!allowCreateWithoutPosition"
                        :disabled="!allowNewCategories || undefined"
                        class="sw-tree-item__before-action"
                        @click="addElement(item, 'before')"
                    >
                        {{ $tc(`${translationContext}.general.actions.createBefore`) }}
                    </sw-context-menu-item>
                    {% endblock %}

                    {% block sw_tree_items_actions_after %}
                    <sw-context-menu-item
                        v-if="!allowCreateWithoutPosition"
                        :disabled="!allowNewCategories || undefined"
                        class="sw-tree-item__after-action"
                        @click="addElement(item, 'after')"
                    >
                        {{ $tc(`${translationContext}.general.actions.createAfter`) }}
                    </sw-context-menu-item>
                    {% endblock %}

                    {% block sw_tree_items_actions_sub %}
                    <sw-context-menu-item
                        v-if="!allowCreateWithoutPosition"
                        :disabled="!allowNewCategories || undefined"
                        class="sw-tree-item__sub-action"
                        @click="addSubElement(item); openTreeItem(true)"
                    >
                        {{ $tc(`${translationContext}.general.actions.createSub`) }}
                    </sw-context-menu-item>
                    {% endblock %}

                    {% block sw_tree_items_actions_duplicate %}
                    <sw-context-menu-item
                        v-if="allowDuplicate"
                        class="sw-context-menu__duplicate-action"
                        @click="onDuplicate(item)"
                    >
                        {{ $tc(`global.default.duplicate`) }}
                    </sw-context-menu-item>
                    {% endblock %}

                    {% block sw_tree_items_actions_group %}
                    <div class="sw-context-menu__group">

                        {% block sw_tree_items_actions_edit %}
                        <sw-context-menu-item @click="onChangeRoute(item)">
                            {{ $tc('global.default.edit') }}
                        </sw-context-menu-item>
                        {% endblock %}

                        {% block sw_tree_items_actions_delete %}
                        <sw-context-menu-item
                            class="sw-context-menu__group-button-delete"
                            :disabled="!allowDeleteCategories || undefined"
                            variant="danger"
                            @click="deleteElement(item)"
                        >
                            {{ $tc('global.default.delete') }}
                        </sw-context-menu-item>
                        {% endblock %}
                    </div>
                    {% endblock %}
                </sw-context-button>
            </slot>
        </div>
        {% endblock %}
    </div>
    {% endblock %}

    {# ToDo: Repeat instead of duplicated Content #}
    {% block sw_tree_item_children_transition %}
    <transition name="fade">
        {% block sw_tree_item_children_content %}
        <div
            v-if="isOpened && item.children.length > 0"
            :id="item.id"
            class="sw-tree-item__children"
            role="group"
            :aria-label="$tc(`sw-tree-item.childrenLabel`, { name: getName(item) })"
        >
            {% block sw_tree_item_children_items %}
            <sw-tree-item
                v-for="child in item.children"
                :key="child.id"
                :item="child"
                :dragged-item="draggedItem"
                :new-element-id="newElementId"
                :translation-context="translationContext"
                :on-change-route="onChangeRoute"
                :active-parent-ids="activeParentIds"
                :active-item-ids="activeItemIds"
                :mark-inactive="markInactive"
                :sortable="sortable"
                :should-focus="shouldFocus"
                :active-focus-id="activeFocusId"
                :display-checkbox="displayCheckbox"
                :disable-context-menu="disableContextMenu"
                :get-is-highlighted="getIsHighlighted"
                @check-item="emitCheckedItem"
            >

                {% block sw_tree_item_children_items_slots %}
                <template #content="{ item, openTreeItem, getName: innerGetName }">
                    {% block sw_tree_item_children_items_slot_content %}
                    <sw-vnode-renderer
                        v-if="contentSlot"
                        :node="renderContentSlotNode({ item, openTreeItem, getName })"
                    />

                    {% block sw_tree_item_children_items_slot_content_default_block %}
                    <template v-else>

                        {% block sw_tree_item_children_items_slot_content_edit %}
                        <template v-if="currentEditElement === item.data.id">
                            <sw-confirm-field
                                v-model="item.data.name"
                                class="sw-tree-detail__edit-tree-item"
                                :prevent-empty-submit="true"
                                :placeholder="$tc(`${translationContext}.general.buttonCreate`)"
                                @input="onFinishNameingElement"
                                @blur="onBlurTreeItemInput(item)"
                                @submit-cancel="onCancelSubmit(item)"
                            />
                        </template>
                        {% endblock %}

                        {% block sw_tree_item_children_items_slot_content_default %}
                        <template v-else>
                            <a
                                v-if="onChangeRoute"
                                class="tree-link"
                                :href="showItemUrl(item)"
                                @click.prevent="onChangeRoute(item)"
                            >
                                <span class="sw-tree-item__label">{{ getName(item) }}</span>
                            </a>
                            <span
                                v-else
                                class="sw-tree-item__label"
                            >{{ getName(item) }}</span>
                        </template>
                        {% endblock %}
                    </template>
                    {% endblock %}
                    {% endblock %}
                </template>

                <template #actions="{ item, openTreeItem }">
                    {% block sw_tree_item_children_items_slot_actions %}

                    {% block sw_tree_items_transition_active_state %}
                    <mt-icon
                        v-if="shouldShowActiveState"
                        size="6px"
                        :color="getActiveIconColor(item)"
                        name="solid-circle-xxxs"
                    />
                    {% endblock %}

                    <sw-vnode-renderer
                        v-if="actionsSlot"
                        :node="renderActionsSlotNode({ item, openTreeItem })"
                    />
                    <template v-else>
                        <sw-context-button
                            v-tooltip="toolTip"
                            :disabled="isDisabled"
                        >

                            {% block sw_tree_items_transition_actions_without_position %}
                            <sw-context-menu-item
                                v-if="allowCreateWithoutPosition"
                                class="sw-tree-item__without-position-action"
                                @click="addElement(item)"
                            >
                                {{ $tc(`${translationContext}.general.actions.withoutPosition`) }}
                            </sw-context-menu-item>
                            {% endblock %}

                            {% block sw_tree_items_transition_actions_before %}
                            <sw-context-menu-item
                                v-if="!allowCreateWithoutPosition"
                                :disabled="!allowNewCategories || undefined"
                                class="sw-tree-item__before-action"
                                @click="addElement(item, 'before')"
                            >
                                {{ $tc(`${translationContext}.general.actions.createBefore`) }}
                            </sw-context-menu-item>
                            {% endblock %}

                            {% block sw_tree_items_transition_actions_after %}
                            <sw-context-menu-item
                                v-if="!allowCreateWithoutPosition"
                                :disabled="!allowNewCategories"
                                class="sw-tree-item__after-action"
                                @click="addElement(item, 'after')"
                            >
                                {{ $tc(`${translationContext}.general.actions.createAfter`) }}
                            </sw-context-menu-item>
                            {% endblock %}

                            {% block sw_tree_items_transition_actions_sub %}
                            <sw-context-menu-item
                                v-if="!allowCreateWithoutPosition"
                                :disabled="!allowNewCategories"
                                class="sw-tree-item__sub-action"
                                @click="addSubElement(item); openTreeItem(true)"
                            >
                                {{ $tc(`${translationContext}.general.actions.createSub`) }}
                            </sw-context-menu-item>
                            {% endblock %}

                            {% block sw_tree_items_transition_actions_duplicate %}
                            <sw-context-menu-item
                                v-if="allowDuplicate"
                                class="sw-context-menu__duplicate-action"
                                @click="onDuplicate(item)"
                            >
                                {{ $tc(`global.default.duplicate`) }}
                            </sw-context-menu-item>
                            {% endblock %}

                            {% block sw_tree_items_transition_actions_group %}
                            <div class="sw-context-menu__group">

                                {% block sw_tree_items_transition_actions_edit %}
                                <sw-context-menu-item @click="onChangeRoute(item)">
                                    {{ $tc('global.default.edit') }}
                                </sw-context-menu-item>
                                {% endblock %}

                                {% block sw_tree_items_transition_actions_delete %}
                                <sw-context-menu-item
                                    class="sw-context-menu__group-button-delete"
                                    :disabled="!allowDeleteCategories || undefined"
                                    variant="danger"
                                    @click="deleteElement(item)"
                                >
                                    {{ $tc('global.default.delete') }}
                                </sw-context-menu-item>
                                {% endblock %}
                            </div>
                            {% endblock %}
                        </sw-context-button>
                    </template>
                    {% endblock %}
                </template>
                {% endblock %}
            </sw-tree-item>
            {% endblock %}
        </div>
        {% endblock %}

        <div
            v-else-if="isLoading"
            class="sw-tree-item__children"
        >
            <sw-skeleton variant="tree-item" />
            <sw-skeleton variant="tree-item" />
            <sw-skeleton variant="tree-item" />
            <sw-skeleton variant="tree-item" />
            <sw-skeleton variant="tree-item" />
        </div>
    </transition>
    {% endblock %}
</div>
{% endblock %}
